<template>
  <div class="page_content daraBoardStreetAnalysis_content">
    <div class="header_box p-10 bold flex flex-ac flex-jsb">
      <div class="title bold">街道分析图</div>
    </div>
    <div class="main_box m-10">
      <div ref="mainEchart" class="main_echart"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
  onUnmounted,
} from "vue";
import * as echarts from "echarts";
const mainEchart = ref<any>(null);
import { useMousePosition } from "@/hooks/dateSelect.ts";
const { timeType } = useMousePosition();
const props: any = defineProps({});
const myChart = shallowRef();
import { streetAnalysisChartApi } from "@/api/dataBoard";
const streetAnalysisChartObj: any = reactive({
  data: {
    otherGarbage: [], //其他车辆
    kitchenWaste: [], //厨余车辆
    xList: [],
  },
});

watch(
  timeType,
  () => {
    init();
  },
  {
    immediate: true,
  }
);
onMounted(() => {
  //  0年 1月 2周
  // orderRadioTimeChange(0);
  myChart.value = echarts.init(mainEchart.value);
  // chartInit();
  window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => {});
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});

function init() {
  getStreetAnalysisChart();
}
// 数据看板_企业-街道分析图
async function getStreetAnalysisChart() {
  streetAnalysisChartObj.data = {};
  let info = {
    timeType: timeType.value || 0,
  };
  const res = await streetAnalysisChartApi(info);
  if (res.status != 200) return;
  console.log("数据看板_企业-街道分析图", res, res?.data);
  let { result = {} } = res?.data;
  console.log("数据看板_企业-街道分析图", result);
  // vehicleWasteStatisticsObj.data = res.data.result;
  streetAnalysisChartObj.data.otherGarbage = result?.otherGarbage.map(
    (item) => {
      return item.garbage_weight;
    }
  );
  streetAnalysisChartObj.data.kitchenWaste =
    result?.kitchenWaste.map((item) => {
      return item.garbage_weight;
    });
  streetAnalysisChartObj.data.xList = result?.kitchenWaste.map(
    (item) => {
      return item.name;
    }
  );
  if (!myChart.value) {
    myChart.value = echarts.init(mainEchart.value);
  }
  chartInit();
  // otherGarbage 其他车辆
  // kitchenWaste 厨余车辆
  // garbage_weight重量  license_number车牌
}
const chartInit = () => {
  console.log(9999, myChart.value);

  let color = ["#FF8700", "#ffc300", "#00e473", "#009DFF"];
  // 绘制图表
  myChart.value.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    grid: {
      top: "15%",
      left: "8%",
      right: "6%",
      containLabel: false,
    },
    legend: {
      bottom: "3%",
      left: "center",
    },
    xAxis: [
      {
        type: "category",
        data: streetAnalysisChartObj.data.xList,
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        // name: "Precipitation",
        // min: 0,
        // max: 250,
        // interval: 50,
        axisLabel: {
          formatter: "{value} 吨",
        },
      },
      // {
      //   type: "value",
      //   name: "Temperature",
      // min: 0,
      // max: 25,
      // interval: 5,
      // },
    ],
    series: [
      {
        name: "其他车辆",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + " 吨";
          },
        },
        data: streetAnalysisChartObj.data.otherGarbage || [],
      },
      {
        name: "厨余车辆",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + " 吨";
          },
        },
        data: streetAnalysisChartObj.data.kitchenWaste || [],
      },
      // {
      //   name: "Temperature",
      //   type: "line",
      //   yAxisIndex: 1,
      //   tooltip: {
      //     valueFormatter: function (value) {
      //       return value + " °C";
      //     },
      //   },
      //   data: [
      //     2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
      //   ],
      // },
    ],
  });
};
const handleResize = () => {
  if (myChart.value) {
    myChart.value.resize();
  }
};
async function orderRadioTimeChange(e) {
  console.log(e);
  // 本月2 本周1 本日0
  // this.numAnalysisApiFrom
  streetAnalysisChartObj.data.xList = [];
  // 年
  if (e == 0) {
    streetAnalysisChartObj.data.xList = [
      // "0月",
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
      // "13点",
      // "14点",
      // "15点",
      // "16点",
      // "17点",
      // "18点",
      // "19点",
      // "20点",
      // "21点",
      // "22点",
      // "23点",
    ];
  } else if (e == 2) {
    streetAnalysisChartObj.data.xList = getCurrentWeek();
  } else if (e == 1) {
    streetAnalysisChartObj.data.xList = await getDaysInMonth(); //获取这个月有多少日，并填充
  }
}
// 获取这个月有多少日，并填充
function getDaysInMonth() {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth();
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  let result = [];
  for (let i = 1; i <= daysInMonth; i++) {
    // result.push(`${year}年${month + 1}月${i}号`);
    result.push(`${i}号`);
  }
  return result;
}
// 获取当前一周
function getCurrentWeek() {
  const now = new Date();
  const dayOfWeek = now.getDay() - 1;
  const startOfWeek = new Date(now);
  startOfWeek.setDate(now.getDate() - dayOfWeek);
  startOfWeek.setHours(0, 0, 0, 0);

  const endOfWeek = new Date(startOfWeek);
  endOfWeek.setDate(startOfWeek.getDate() + 6);
  endOfWeek.setHours(23, 59, 59, 999);
  let currentWeek = {
    start: startOfWeek,
    end: endOfWeek,
  };
  let timeList = [];
  // console.log("本周开始日期：", currentWeek.start.toLocaleDateString());
  // console.log("本周结束日期：", currentWeek.end.toLocaleDateString());
  for (let i = 0; i < 7; i++) {
    const date = new Date(currentWeek.start);
    date.setDate(currentWeek.start.getDate() + i);
    timeList.push(date.toLocaleDateString());
    // console.log("第" + (i + 1) + "天：" + date.toLocaleDateString());
  }
  return timeList;
}
</script>

<style lang="scss" scoped>
.daraBoardStreetAnalysis_content {
  height: 400px;
  .header_box {
  }
  .main_box {
    .main_echart {
      width: 100%;
      height: calc(400px - 35px - 20px);
    }
  }
}
</style>